<template>
	<transition appear name="columnT">
	<div class="column">
		<div class="box" style="margin-top:135px">
			<div class="articleTitle">
				{{thisArticle.title}}
			</div>
			<p class="articleTime">
				{{ thisArticle.publishTime | dateformat('YYYY-MM-DD HH:mm:ss') }}
			</p>
			<div class="clearFloat"></div>
			
			<div v-html="thisArticle.content">
				
			</div>
		</div>
					
	</div>
		</transition>
</template>

<script>
	export default {
		name: 'atricle',
		components: {
			// HelloWorld
		},
		data() {
			return {
				columnId: '',
				articleId:'',
				thisArticle: {},

			};
		},
		created() {
			
			this.refresh();
		},
		watch: {
			// 如果路由有变化，会再次执行该方法
			$route: 'refresh'
		},
		methods: {
			refresh() {
				this.columnId = this.$route.params.columnId;
				this.articleId = this.$route.params.articleId;
				this.getArticle()
			},
			getArticle() {

				this.requestMy({
						url: '/articles/' + this.articleId,
						method: 'get',
						params: {}
					})
					.then(response => {
						// console.log(response);
						this.thisArticle = response;
					})
					.catch(error => {
						console.log(error);
					});
			}
		
		},
	}
</script>

<style>
	.articleTitle{
		font-size:32px;
		color:#3c3e42;
		font-weight:bold ;
	}
	.articleTime{
		font-size:14px;
		color:#a7a7a7;
		float:right;
	}
	.clearFloat{
		clear:both;
	}
	.articleT-enter-active,
	.articleT-leave-active {
		transition: all  1s;
	}
	.articleT-enter, .articleT-leave-to /* .fade-leave-active below version 2.1.8 */ {
		transform: translateY(1300px);
	}
	
</style>
